<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="me-view-card">
      <h1 class="me-view-title">{{ dataForm.title }}</h1>
      <div class="me-view-author">
        <a class="">
          <!-- <el-avatar :size="50" :src="dataForm.headurl"></el-avatar> -->
          <!-- <el-image class="me-view-picture" :src="dataForm.headUrl"></el-image> -->
          <el-image class="me-view-picture" :src="dataForm.headurl"></el-image>
        </a>
        <div class="me-view-info">
          <span>{{ dataForm.deptName + dataForm.userName }}</span>
          <div class="me-view-meta">
            <span>{{ dataForm.pubDate }}</span>
            <span>阅读 {{ dataForm.readNum }}</span>
            <span>评论 {{ dataForm.writeNum }}</span>
          </div>
        </div>
        <el-button
          @click="addBbsHandle()"
           v-if="hasPermissionInfo('trends:trendsbbs:update')&&$hasPermission('trends:trendsbbs:update')"
          style="position: absolute; left: 60%"
          size="mini"
          round
          icon="el-icon-edit"
          >编辑</el-button
        >
      </div>
      <div v-html="dataForm.content"></div>
      <div class="me-view-end">
        <el-alert title="文章End..." type="success" center :closable="false">
        </el-alert>
      </div>

      <div class="me-view-tag">
        文章分类：
        <!--<span style="font-weight: 600">{{article.category.categoryname}}</span>-->
        <el-button size="mini" type="primary" round plain>{{
          $getDictLabel("bbsType", dataForm.type)
        }}</el-button>
      </div>

      <div class="me-view-comment">
        <div class="me-view-comment-write">
          <el-row :gutter="10">
            <el-col :span="2">
              <a class="">
                <!-- <img class="me-view-picture" :src="avatar"></img> -->
                <el-image
                  class="me-view-picture"
                  :src="dataForm.headurl"
                ></el-image>
              </a>
            </el-col>
            <el-col :span="22">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2}"
                    placeholder="你的评论..."
                    class="me-view-comment-text"
                    v-model="comment.content"
                    resize="none">
                  
              </el-input>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="2" :offset="22">
              <el-button type="text" @click="publishComment()">评论</el-button>
            </el-col>
          </el-row>
        </div>

        <div class="me-view-comment-title">
          <span>{{ dataForm.writeNum }} 条评论</span>
        </div>

        <commment-item
          v-for="(c, index) in comments"
          :comment="c"
          :articleId="dataForm.id"
          :index="index"
          :rootCommentCounts="comments.length"
          @commentCountsIncrement="commentCountsIncrement"
          :key="c.id"
        >
        </commment-item>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
    <add-bbs
      v-if="addBbsVisible"
      ref="AddBbs"
      @refreshDataList="getInfo"
    ></add-bbs>
    </div>
  </el-card>
</template>

<script>
import ServerDetectionVue from "../sys/ServerDetection.vue";
import CommmentItem from "./CommentItem";
import AddBbs from "./bbs-add";
export default {
  data() {
    return {
      dataForm: {
        id: this.$route.query.ID,
        title: "",
        content: "",
        pubDate: "",
        type: "",
        deptId: "",
        readNum: "",
        writeNum: "",
        creator: "",
        createDate: "",
        userName: "",
        deptName: "",
      },
      comments: [],
      comment: {
        bbsId: "",
        content: "",
      },
      addBbsVisible: false,
      permissionListDTO: [],
    };
  },
  created() {
    if (this.dataForm.id) {
      this.getInfo();
    }
  },
  computed: {},
  methods: {
    // 获取信息
    getInfo() {
      this.$http
        .get(`/trends/trendsbbs/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = res.data;
          this.getCommentsByArticle(this.dataForm.id);
          this.permissionListDTO=res.data.permissionListDTO
        })
        .catch(() => {});
    },
    getCommentsByArticle() {
      this.$http
        .get(`/trends/trendsbbs/comment`, {
          params: {
            bbsId: this.dataForm.id,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.comments = res.data;
          console.log(this.comments);
        })
        .catch(() => {});
    },
    commentCountsIncrement() {
      this.dataForm.writeNum += 1;
    },
     publishComment() {
        let that = this
        if (!that.comment.content) {
          return;
        }
        that.comment.bbsId = that.dataForm.id
        this.$http
        .post(
          "/trends/trendsbbs/savecomment", that.comment)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          that.$message({type: 'success', message: '评论成功', showClose: true})
          that.comments.unshift(res.data)
          that.commentCountsIncrement()
          that.comment.content = ''
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "评论失败"
          });
        });
      },
      addBbsHandle() {
      this.addBbsVisible = true;
      this.$nextTick(() => {
        this.$refs.AddBbs.dataForm.id = this.$route.query.ID;
        this.$refs.AddBbs.init();
      });
    },
    //判断操作权限
    hasPermissionInfo(val) {
      let _this = this;
      let arr = _this.permissionListDTO;
      if (arr && arr != []) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i];
          if (element.permission.indexOf(val) != -1 && element.state == true) {
            return true;
          }
        }
      } else {
        return false;
      }
    }
  },
  components: {
    CommmentItem,
    AddBbs,
  },
  watch: {
    $route(to, from) {
      if (to.name == "bbsinfo") {
        this.dataForm.id = this.$route.query.ID;
        console.log("dad" + this.dataForm.id);
        this.getInfo();
      }
    },
  },
};
</script>
<style>
.me-view-body {
  margin: 100px auto 140px;
}

.me-view-container {
  width: 700px;
}

.el-main {
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
  line-height: 1.5;
}

.me-view-end {
  margin-top: 20px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 0px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}
</style>